<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>


    <script>
        // 事件捕获------------------------------
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function () {
        //     console.log('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function () {
        //     console.log('father');
        // }, true);
        // document.addEventListener('click', function () {
        //     console.log('document');
        // }, true);

        // 点击son，依次输出document father son
        // 什么是阻止事件捕获：它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件

        // 事件冒泡-----------------------------
        // addEventListener 第三个参数默认为false
        // 
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            console.log('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            console.log('father');
        }, false);
        document.addEventListener('click', function () {
            console.log('document');
        })
        // 点击son 依次输出 son father document

        // 什么是阻止事件冒泡。以上例代码来看，用户点击son盒子只希望son元素的事件执行，但是由于事件冒泡的原因，他的祖先元素的绑定事件也会执行，所以输出的应该是 son father document，当使用stopPropagation时就相当于阻隔了事件继续向上执行。也就是father，document上面的事件不会再执行。

        // 为啥会有事件冒泡？假如父元素绑定了一个事件，当我们在未来某个时间点给这个父元素添加了一个子元素，子元素的大小恰好和父元素的大小一样，那么用户点击的时候目标元素其实是这个子元素，但是子元素上没有绑定事件，如果没有事件冒泡的话那么无论用户怎么点击，页面都不会做出反馈，有了事件冒泡就不一样了，子元素没有事件就去父元素上面去找，找到了就执行。这样用户的操作就不会没有响应。
        // 这么来看的话 有点像作用域查找变量的味道了。但是不同的是作用域查找变量时找到了就结束，而事件冒泡会递归到根元素

        // DOM事件流（一共有三个阶段）
        // 事件捕获阶段
        // 处于目标阶段
        // 事件冒泡阶段

        //addEventListener 的第三个参数表示该事件是在哪个阶段触发（捕获阶段或者是冒泡阶段），如果为true表示在事件捕获阶段触发，如果为false表示在事件冒泡阶段触发。


        // 事件委托
        // 事件委托 本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到 目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。
    </script>

</body>

</html>